<template>
  <section>
    <div class="sidebar-header">
          <span class="sidebar-header-title">
              点击最多
          </span>
    </div>
    <main class="sidebar-lists">
      <ul>
        <li v-for="blog in Blogs" :key="blog.id" class="sidebar-list-item">
          <a class="tag tooltipped tooltipped-n" :href="`/newsDetail/${blog.id}`">
            {{ blog.title }}
          </a>
        </li>
      </ul>
    </main>
  </section>
</template>

<script>
export default {
  name: "getViews",
  data() {
    return {
      Blogs:[],
    }
  },
  methods: {
    getViews(){
      this.$axios.get("/tbBlog/getViews").then((res) => {
        this.Blogs = res.data.data;
      });
    }
  },
  mounted() {
    this.getViews();
  }
}
</script>

<style scoped>
.sidebar-container .sidebar-header {
  position: relative;
  padding-bottom: 13px;
  padding-top: 40px;
  margin-left: 0px;
}

.sidebar-lists {
  font-family: "Helvetica", Arial, sans-serif; /* 设置字体样式 */
  font-size: 15px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: rgba(0, 0, 17, 0.29); /* 设置字体颜色 */
  text-decoration: none; /* 去除下划线 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 设置字体阴影 */
  letter-spacing: 1px; /* 设置字体间距 */
  /*line-height: 1.5; !* 设置行高 *!*/
  text-align: center; /* 设置文本对齐方式 */

  list-style: none;
  line-height: 40px;
  /*font-size: 14px;*/
  padding: 0 3%;
}
.sidebar-list-body li.sidebar-list-item:first-child {
  margin-top: 15px;
}

.sidebar-list-body li.sidebar-list-item {
  margin-top: 25px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.sidebar-list .sidebar-list-item {
  margin: 20px 0px 20px 20px;
}
.sidebar-header .sidebar-header-title:after {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  width: 70px;
  background: #2f2f2d;
  content: '';
}
.sidebar-lists ul {
  padding: 0;
}

.sidebar-lists li {
  list-style: none;
  border-bottom: 1px solid #eee;
  line-height: 40px;
}

.sidebar-lists a {
  text-decoration: none;
  display: block;
}
.sidebar-list ul {
  list-style: none;
  padding: 0;
}
</style>
